<template>
	<view class="bai left clearfix">
		<uni-popup ref="popup" type="center" @maskClick="closePopup()">
			<view class="dep-box left clearfix relative">
				<view class="login-close absolute" @click="closePopup()">
					<uni-icons type="closeempty" color="#fff" size="18"></uni-icons>
				</view>
				
				<view class="login-title left clearfix">
					会员充值
				</view>
				
				<view class="dep-content left clearfix">
					
					
					<view class="dep-item left clearfix" v-for="(item,index) in deposit">
						<view class="dep-title-box bai left">
						{{item.title}}
						</view>
						<view class="dep-desc left bai">
							{{item.desc}}
						</view>
						<view class="dep-price left bai">
							<label>￥</label>
							<label>{{item.price}}</label>
						</view>
						<view class="dep-text left clearfix bai" v-if="item.price == 0">
							赠送<label>{{item.dou}}</label>魔豆，有效期{{item.time}}个月。
						</view>
						<view class="dep-text left clearfix bai" v-if="item.price > 0">
							共<label>{{item.dou}}</label>魔豆，有效期{{item.time}}个月。
						</view>
						<view class="dep-text left clearfix bai">
							{{item.space}}GB存储空间。
						</view>
						
						<view class="dep-submit left clearfix" v-if="item.price==0 && isReceive == false" @click="submitReceive(item)">
							立即领取
						</view>
						
						<view class="dep-submit left clearfix" style="background:#ebf2fd;color:#94bcff;border:1px dotted #94bcff;" v-if="item.price==0 && isReceive == true">
							领取过了
						</view>
						
						
						<view class="dep-submit left clearfix" v-if="item.price > 0" @click="submitPay(item,index)">
							立即购买
						</view>
					</view>
					
				</view>
				
			</view>
			
		</uni-popup>
		<zmt-pay-popup @close="closeShowPay" :data="payData" :show="showPay"></zmt-pay-popup>
	</view>
</template>

<style scoped>
	.dep-submit{width:70%;height:36px;line-height:36px;background:#2979ff;text-align: center;font-size:13px;color:#fff;margin-left:15%;border-radius: 10px;margin-top:40px;cursor:pointer;}
	.dep-text label{color:#2979ff;}
	.dep-text{font-size:14px;color:#666;line-height:40px;text-align: center;}
	.dep-price label:last-child{font-size:32px;color:#2979ff;font-weight:bold;}
	.dep-price label:first-child{font-size:15px;color:#999;}
	.dep-price{height:50px;text-align: center;line-height:50px;margin-top:20px;}
	.dep-desc{font-size:14px;line-height:22px;margin-top:5px;text-align:center;color:#666;}
	.dep-title-box{font-size: 22px;font-weight: 600;line-height: 32px;margin-top: 32px;text-align: center;}
	.dep-item{width:23%;height:350px;background:#fff;border-radius: 12px;margin-left:1%;margin-right:1%;box-shadow: 0 4px 24px 0 rgba(21, 27, 38, .08);}
	.login-submit-box{height:50px;line-height:50px;width:50%;margin-left:25%;background: #2468f2;background-image: linear-gradient(90deg, #4287fe, #298bfe 25%, #0f8ffd 51%, #25b4c1);border-radius: 22.5px;text-align: center;color:#fff;font-size:14px;margin-top:20px;cursor:pointer;}
	.dep-input-box input{width:calc(100% - 20px);margin-left:20px;height:50px;line-height:50px;margin-top:5px;font-size:18px;}
	.dep-input-box{width:70%;height:60px;background:#fff;border-radius: 12px;margin-left:15%;margin-top:100px;border:1px solid #ddd;}
	.dep-content{width:96%;height:350px;margin-left:2%;margin-top:40px;}
	.login-title{width:90%;height:30px;font-size:18px;font-weight:500;text-align: left;margin-top:20px;color:#151b26;margin-left:20px;}
	.login-close{width:35px;height:35px;line-height:35px;text-align:center;border-radius: 50%;background:rgba(21, 27, 38, .6);top:0;right:-64px;cursor: pointer;}
	.dep-box{width:1100px;height:500px;border-radius: 10px;background-color:#fff;background-image: url('/static/images/body-bj.png'), linear-gradient(180deg, #e9f1ff, #f5f9ff);background-repeat: no-repeat;background-size: 100% auto;}
</style>


<script>
	var db = uniCloud.database();
	var global = uniCloud.importObject('global',{customUI:true});
	export default {
		name:"zmt-deposit-money",
		data(){
			return {
				deposit:[],
				isReceive:false,
				showPay:false,
				payData:{}
			}
		},
		props:{
			show:{
				type:Boolean,
				default:false
			},
			userinfo:{
				type:Object
			}
		},
		watch:{
			"show"(val){
				if(val == false){
					this.$refs.popup.close();
				}else if(val == true){
					this.$refs.popup.open();
				}
			}
		},
		mounted() {
			var that = this;
			setTimeout(function(){
				that.getMoneyData();
			},1000);
			
		},
		methods:{
			//弹出支付页面
			submitPay(item,index){
				item.title = '余额充值';
				this.payData = item;
				this.showPay = true;
				this.closePopup();
			},
			//获取数据
			getMoneyData(){
				var that = this;
				var userinfo = that.userinfo;
				db.collection('recharge').get().then(res=>{
					this.deposit = res.result.data;
					if(userinfo && userinfo._id){
						//查询出当前用户是否已经领取过
						db.collection('uni-id-users').where({_id:userinfo._id}).field('_id,dou,money,receive').get({getOne:true}).then(userRes=>{
							var user = userRes.result.data;
							if(user.receive && user.receive.dou > 0){
								that.isReceive = true;
							}else{
								that.isReceive = false;
							}
						});
					}
					
				});
			},
			//领取
			submitReceive(item){
				var that = this;
				var userinfo = this.userinfo;
				console.log('uid',userinfo._id);
				if(userinfo && userinfo._id && item._id && item.price == 0){
					uni.showLoading({
						title:'领取中'
					})
					global.receive(userinfo,item).then(res=>{
						if(res.code == 200){
							uni.hideLoading()
							that.isReceive = true;
							//更新缓存本地用户数据的魔豆数量
							userinfo.dou = res.result.dou;
							that.updateLoginStorage(userinfo);
							uni.showToast({
								title:'领取成功',
								icon:'none',
								duration:2000
							})
						}else if(res.code == '003'){
							uni.hideLoading()
							that.isReceive = true;
							uni.showToast({
								title:'已经领取过了',
								icon:'none',
								duration:2000
							})
						}else{
							uni.hideLoading()
							uni.showToast({
								title:'领取失败',
								icon:'none',
								duration:2000
							})
						}
					});
				}
				
				
			},
			//更新登录缓存
			updateLoginStorage(userinfo){
				uni.setStorage({
					key:'login-userinfo',
					data:userinfo,
					success:function(){
						console.log('更新缓存成功');
					}
				})
			},
			//支付弹窗关闭
			closeShowPay(){
				this.showPay = false;
			},
			//关闭充值弹窗
			closePopup(){
				this.$refs.popup.close();
				this.$emit('close',false);
			}
		}
	}
	
</script>
